<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>{$cof['title']}{$cof['subheading']}</title>
    <meta name="keywords" content="{$cof['keywords']}" />
    <meta name="description" content="{$cof['description']}" />
    <meta name="author" content="零艺客" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="http://lib.baomitu.com/modernizr/2.8.3/modernizr.min.js"></script>
    <link rel="stylesheet" href="http://cdn.fh.lykep.com/antired2.0/css/plugins.css">
    <link rel="stylesheet" href="http://cdn.fh.lykep.com/antired2.0/css/main.css">
    <link rel="stylesheet" href="http://cdn.fh.lykep.com/antired2.0/css/oneui.css">
    <link rel="stylesheet" href="http://cdn.fh.lykep.com/antired2.0/css/style.css">
    <script src="http://cdn.fh.lykep.com/antired2.0/js/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layer/2.3/layer.js"></script>
    <script src="http://lib.baomitu.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.item.lessh.cn/item/js/QqShield.1.1.js"></script>
    <!--[if lt IE 9]>
    <script src="//lib.baomitu.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//lib.baomitu.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
    <style>
        .input-group {
            margin-bottom: 15px;
        }

        .igroup label {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            font-weight: normal;
            display: inline-block;
            margin: 10px;
            text-align: center
        }

        .progress {
            position: relative;
            width: 100%;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0px;
            overflow: hidden;
        }

        /* 初始状态设置进度条宽度为0px */
        .progress>div {
            width: 0px;
            height: 100%;
            background-color: yellowgreen;
            transition: all .3s ease;
        }

        #file-load {
            display: none;
        }

        #file-load-num {
            position: absolute;
            top: -5px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }
    </style>
</head>

<body>
    <img style="background: linear-gradient(to bottom,#49BDAD,#f2b9ca);" class="full-bg full-bg-bottom"
        ondragstart="return false;" oncontextmenu="return false;"> <br />
    <div class="col-xs-12 col-sm-10 col-md-8 col-lg-5 center-block" style="float: none;">
        <!--公告-->
        <div class="modal fade" align="left" id="anounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">公告</h4>
                    </div>
                    <div class="modal-body">
                        {$cof['notice']|raw}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!--公告-->
        <div class="widget">
            <!--logo-->
            <div class="widget-content themed-background-flat text-center"
                style="background-image: url(http://cdn.fh.lykep.com/antired2.0/img/nav.jpg);background-size: 100% 100%;">
                <a href="javascript:void(0)"> <img
                        src="http://q4.qlogo.cn/headimg_dl?dst_uin={$cof['contact']}&spec=100" alt="Avatar" width="80"
                        alt="avatar" style="height: auto; filter: alpha(Opacity=80);-moz-opacity: 0.80;opacity: 0.80;"
                        class="img-circle img-thumbnail img-thumbnail-avatar-1x animated zoomInDown"> </a> </div>
            <!--logo-->
            <!--logo下面按钮-->
            <div class="widget-content themed-background-muted text-center ">
                <div class="btn-group themed-background-muted "> <a href="#anounce" target="_blank" data-toggle="modal"
                        class="btn btn-effect-ripple btn-default collapsed "><b>
                            <font color="#ff0000"><i class="fa fa-file fa-fw"></i> <span
                                    style="font-weight:bold">公告</span></font>
                        </b></a>
                    <!--http://wpa.qq.com/msgrd?v=3&uin=656001878&site=qq&menu=yes-->
                    <a href="http://wpa.qq.com/msgrd?v=3&uin={$cof['copyright']}&site=qq&menu=yes" target="_blank"
                        class="btn btn-effect-ripple btn-default"><i class="fa fa-qq"></i> <span
                            style="font-weight:bold">联系</span></a> </div>
                <div id="mustsee" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                    <div id="mustsee" class="panel-collapse collapse in" aria-expanded="true"> </div>
                </div>
            </div>
        </div>
        <div class="block full2">
            <!--TAB标签-->
            <div class="block-title">
                <ul class="nav nav-tabs" data-toggle="tabs">
                    <li style="width: 100%;" align="center" class="active">
                        <a href="#saveTask" data-toggle="tab">
                            <span style="font-weight:bold">
                                <i class="fa fa-coffee fa-fw"></i>
                                作业上交
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--TAB标签-->
            <div class="tab-content">
                <!--搜索-->
                <div class="tab-pane active" id="saveTask">
                    <div class="form-group">
                        <div class="input-group" id="form-no">
                            <div class="input-group-addon">个人学号</div>
                            <input type="text" name="studentNo" id="studentNo" value="" class="form-control"
                                placeholder="请输入你的学号" required />
                        </div>
                        <div class="input-group" id="form-token">
                            <div class="input-group-addon">上传密钥</div>
                            <input type="text" name="studentToken" id="studentToken" value="" class="form-control"
                                placeholder="请输入上传密钥" required />
                        </div>
                        <div class="input-group" id="form-course" onchange="optCourse()">
                            <div class="input-group-addon">选择学科</div>
                            <select class="form-control" id="courseId">
                                <option value="">请选择学科</option>
                                {volist name="course" id="vo"}
                                <option value="{$vo.course_id}">{$vo.course_name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="input-group" id="form-task">
                            <div class="input-group-addon">选择作业</div>
                            <select class="form-control" id="taskId">
                                <option value="">暂无作业</option>
                            </select>
                        </div>
                        <div class="input-group" id="form-annex">
                            <div class="input-group-addon">选择文件</div>
                            <!-- <input type="text" name="inputvalue" value="" class="form-control"
                                placeholder="点击右边选择来选择你需要上交的作业文件" required /> -->
                            <input type="file" name="file" id="annexFile" class="form-control" required />
                            <!-- <span class="input-group-btn" id="Bsource"><a class="btn btn-warning">选择</a></span> -->
                        </div>
                        <div class="input-group" id="file-load" style="width: 100%;">
                            <div class="progress">
                                <div></div>
                            </div>
                            <span id="file-load-num">0</span>
                        </div>
                    </div>
                    <div id="alert_frame" class="alert alert-success animation-pullUp"
                        style="display:none;font-weight: bold;"></div>
                    <input type="button" id="start" class="btn btn-primary btn-block" value="立即提交">
                    <br />
                </div>

            </div>
        </div>
        <script>
            /*提交按下*/
            $('#start').click(function () {
                if ($("#studentNo").val() == "") {
                    layer.msg("请输入学号");
                    return
                }
                if ($("#courseId").val() == "") {
                    layer.msg("请选择学科");
                    return
                }
                if ($("#taskId").val() == "") {
                    layer.msg("请选择作业");
                    return
                }
                if ($("#annexFile")[0].files[0] == undefined) {
                    layer.msg("请选择上传文件");
                    return
                }
                var fd = new FormData();
                fd.append('taskId', $("#taskId").val())
                fd.append('courseId', $("#courseId").val())
                fd.append('studentToken', $("#studentToken").val())
                fd.append('studentNo', $("#studentNo").val())
                fd.append('file', $("#annexFile")[0].files[0]);
                $("#file-load-num").text("0%")
                $('.progress > div').css('width', "0%");
                $.ajax({
                    url: "/api/home/saveTask",
                    type: "post",
                    dataType: "json",
                    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                    data: fd,
                    contentType: false, //不设置内容类型
                    processData: false, //不处理数据
                    xhr: function () {
                        $("#file-load").css("display", "block");
                        var xhr = new XMLHttpRequest();
                        //使用XMLHttpRequest.upload监听上传过程 注册progress事件
                        xhr.upload.addEventListener('progress', function (e) {
                            var progressRate = Math.floor(e.loaded / e.total * 100);
                            //通过设置进度条的宽度达到效果
                            $('.progress > div').css('width', progressRate + "%");
                            $("#file-load-num").text(progressRate + "%")
                        })
                        return xhr;
                    },
                    beforeSend: function () {

                    },
                    success: function (data) {
                        if (data.code == 200) {
                            layer.confirm(data.msg, {
                                btn: ['确定'] //按钮
                            }, function () {
                                window.location.reload()
                            });
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (XMLResponse) {
                        //异常捕获
                        layer.msg("接口异常")
                    }
                });
            });

            // 选择学科
            function optCourse() {
                //获取被选中的option标签
                var vs = $('#courseId').val();
                if (vs != '') {
                    getTask(vs);
                } else {
                    $('#taskId').html('<option value="">暂无作业</option>');

                }
            }

            //获取作业
            function getTask(id) {
                if (id) {
                    var taskList = '';
                    $.ajax({
                        url: "/api/home/getTask?cid=" + id,
                        type: "get",
                        dataType: "json",
                        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                        contentType: false, //不设置内容类型
                        processData: false, //不处理数据
                        beforeSend: function () {

                        },
                        success: function (data) {
                            layer.msg(data.msg);
                            if (data.data.length > 0) {
                                for (let index = 0; index < data.data.length; index++) {
                                    taskList = taskList +
                                        '<option value="' + data.data[index].id + '">' + data.data[index]
                                        .taskName +
                                        '</option>';
                                }
                                $('#taskId').html(taskList);
                                return false;
                            }
                            $('#taskId').html('<option value="">暂无作业</option>');
                        },
                        error: function (XMLResponse) {
                            //异常捕获
                        }
                    });
                }
            }
        </script>

        <!--底部版权-->
        <div class="panel panel-default">
            <center>
                <div class="panel-body">
                    {$cof['copyright']|raw}
                </div>
            </center>
        </div>
        <!--底部导航-->
        <script>
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?05f377804145021ab3a8772c3880570f";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
</body>

</html>